<template>
  <div>
    <k-form-build
      :value="jsonData"
      ref="KFB"
      @submit="handleSubmit"
    />
    <button @click="getData">提交</button>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  data() {
    return {
      jsonData: {
        'list': [{
          'type': 'time',
          'label': '时间选择框',
          'options': {
            'width': '100%',
            'defaultValue': '',
            'disabled': false,
            'hidden': false,
            'clearable': false,
            'placeholder': '请选择',
            'format': 'HH:mm:ss'
          },
          'model': 'time_1640845203112',
          'key': 'time_1640845203112',
          'help': '',
          'rules': [{ 'required': false, 'message': '必填项' }]
        }, {
          'type': 'uploadImg',
          'label': '上传图片',
          'options': {
            'defaultValue': '[]',
            'multiple': false,
            'hidden': false,
            'disabled': false,
            'width': '100%',
            'data': '{}',
            'limit': 3,
            'placeholder': '上传',
            'fileName': 'image',
            'headers': {},
            'action': 'http://cdn.kcz66.com/upload-img.txt',
            'listType': 'picture-card'
          },
          'model': 'uploadImg_1640845203655',
          'key': 'uploadImg_1640845203655',
          'help': '',
          'rules': [{ 'required': false, 'message': '必填项' }]
        }, {
          'type': 'selectInputList',
          'label': '选择输入列',
          'columns': [{
            'value': '1',
            'label': '选项1',
            'list': [{
              'type': 'treeSelect',
              'label': '树选择器',
              'icon': 'icon-tree',
              'options': {
                'disabled': false,
                'multiple': false,
                'hidden': false,
                'clearable': false,
                'showSearch': false,
                'treeCheckable': false,
                'placeholder': '请选择',
                'dynamicKey': '',
                'dynamic': true,
                'options': [{
                  'value': '1',
                  'label': '选项1',
                  'children': [{ 'value': '11', 'label': '选项11' }]
                }, { 'value': '2', 'label': '选项2', 'children': [{ 'value': '22', 'label': '选项22' }] }]
              },
              'model': 'treeSelect_1640845209268',
              'key': 'treeSelect_1640845209268',
              'help': '',
              'rules': [{ 'required': false, 'message': '必填项' }]
            }]
          }, { 'value': '2', 'label': '选项2', 'list': [] }],
          'options': { 'disabled': false, 'multiple': true, 'hidden': false, 'showLabel': false, 'width': '100%' },
          'model': 'selectInputList_1640845204901',
          'key': 'selectInputList_1640845204901',
          'help': ''
        }, {
          'type': 'editor',
          'label': '富文本',
          'list': [],
          'options': {
            'height': 300,
            'placeholder': '请输入',
            'defaultValue': '',
            'chinesization': true,
            'hidden': false,
            'disabled': false,
            'showLabel': false,
            'width': '100%'
          },
          'model': 'editor_1640845207862',
          'key': 'editor_1640845207862',
          'help': '',
          'rules': [{ 'required': false, 'message': '必填项' }]
        }, {
          'type': 'switch',
          'label': '开关',
          'options': { 'defaultValue': false, 'hidden': false, 'disabled': false },
          'model': 'switch_1640845206518',
          'key': 'switch_1640845206518',
          'help': '',
          'rules': [{ 'required': false, 'message': '必填项' }]
        }, {
          'type': 'selectInputList',
          'label': '选择输入列',
          'columns': [{ 'value': '1', 'label': '选项1', 'list': [] }, { 'value': '2', 'label': '选项2', 'list': [] }],
          'options': { 'disabled': false, 'multiple': true, 'hidden': false, 'showLabel': false, 'width': '100%' },
          'model': 'selectInputList_1640845205480',
          'key': 'selectInputList_1640845205480',
          'help': ''
        }],
        'config': {
          'layout': 'horizontal',
          'labelCol': { 'xs': 4, 'sm': 4, 'md': 4, 'lg': 4, 'xl': 4, 'xxl': 4 },
          'labelWidth': 100,
          'labelLayout': 'flex',
          'wrapperCol': { 'xs': 18, 'sm': 18, 'md': 18, 'lg': 18, 'xl': 18, 'xxl': 18 },
          'hideRequiredMark': false,
          'customStyle': ''
        }
      }
    }
  },
  methods: {
    handleSubmit(p) {
      // 通过表单提交按钮触发，获取promise对象
      p().then(res => {
        // 获取数据成功
        alert(JSON.stringify(res))
      })
        .catch(err => {
          console.log(err, '校验失败')
        })
    },
    getData() {
      // 通过函数获取数据
      this.$refs.KFB.getData().then(res => {
        // 获取数据成功
        alert(JSON.stringify(res))
      })
        .catch(err => {
          console.log(err, '校验失败')
        })
    }
  }
}
</script>
